<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
    </head>
    <body>
    <div class="x-body layui-anim layui-anim-up">
        <blockquote class="layui-elem-quote">欢迎管理员：
            <span class="x-red" th:text="${session.admin.adminName}"></span></blockquote>
        <fieldset class="layui-elem-field">
            <legend>数据统计</legend>
            <div class="layui-field-box">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 90px;">
                                <div carousel-item="">
                                    <ul class="layui-row layui-col-space10 layui-this">
                                        <li class="layui-col-xs3">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>管理员数量</h3>
                                                <p>
                                                    <cite id="adminNum"></cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>设备数量</h3>
                                                <p>
                                                    <cite id="deviceNum"></cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>扫描类型数量</h3>
                                                <p>
                                                    <cite id="typeNum"></cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs3">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>扫描数据数量</h3>
                                                <p>
                                                    <cite id="dataNum"></cite></p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
        <div id="main" style="width: 100%;height:400px;"></div>

        <blockquote class="layui-elem-quote layui-quote-nm">四川大学基线检查系统后台</blockquote>
    </div>
    <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript">

        $(function(){
            $.ajax({
                type:"post",
                url:"/count",
                dataType:"json",
                success:function (data) {
                    if(data.code === 200){
                        let adminNum = data.data[0];
                        let deviceNum = data.data[1];
                        let typeNum = data.data[2];
                        let dataNum = data.data[3];
                        //显示到相应容器
                        $("#adminNum").text(adminNum);
                        $("#deviceNum").text(deviceNum);
                        $("#typeNum").text(typeNum);
                        $("#dataNum").text(dataNum);
                        // 基于准备好的dom，初始化echarts实例
                        let myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        let option = {
                            title: {},
                            tooltip: {},
                            radar: {
                                // shape: 'circle',
                                indicator: [
                                    {name: '管理员数量', max: 30},
                                    {name: '设备数量', max: 10},
                                    {name: '扫描类型数量', max: 10},
                                    {name: '扫描数据数量', max: 50},
                                ]
                            },
                            series: [{
                                type: 'radar',
                                // areaStyle: {normal: {}},
                                data: [
                                    {
                                        value: [adminNum, deviceNum, typeNum, dataNum],

                                    }
                                ]
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }

                }
            })

        })

    </script>
    </body>
</html>